<template>
	<!-- 客户备案详情 -->
	<div style="">
		<div style="padding: 20rpx;">
			<uni-forms ref="form" :modelValue="entity" label-width="110px">
				<div class="client">
					<uni-forms-item label="客户编码:">
						<uni-easyinput v-model="entity.cCusCode" placeholder="请输入客户编码" disabled :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="客户名称:" v-model="entity.cCusName" readonly>
						<uni-easyinput v-model="entity.cCusName" placeholder="请输入客户名" disabled :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="cCusAbbName" label="客户简称:">
						<uni-easyinput v-model="entity.cCusAbbName" placeholder="请输入客户简称" disabled
							:inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="ONOfCompany" label="公司正式名称:">
						<uni-easyinput v-model="entity.ONOfCompany" placeholder="请输入公司正式名称" disabled
							:inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="cTrade" label="行业分类:">
						<uni-easyinput v-model="entity.cTrade" placeholder="请输入行业分类" disabled :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="SaleType" label="销售性质:">
						<uni-easyinput v-model="entity.SaleType" placeholder="请输入销售性质" disabled :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="ParentName" label="上级单位:" placeholder="选择上级单位">
						<uni-easyinput v-model="entity.ParentName" placeholder="请输入上级单位" disabled
							:inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="cCusTypeName" label="客户类型:">
						<uni-easyinput v-model="entity.cCusTypeName" placeholder="请输入客户类型" disabled
							:inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="CustomerOrigin" label="客户来源:">
						<uni-data-select placeholder="选请择客户来源" v-model="entity.CustomerOrigin"
							:localdata="CustomerOriginOptions" disabled></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="省:" readonly>
						<uni-easyinput v-model="entity.cProvinceName" placeholder="请输入省" disabled
							:inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item label="市:" readonly>
						<uni-easyinput v-model="entity.cCityName" placeholder="请输入市" disabled :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="CountyName" label="区:">
						<uni-easyinput v-model="entity.cCountyName" placeholder="请输入区" disabled :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="cCusAccount" label="银行账号:">
						<uni-easyinput v-model="entity.cCusAccount" placeholder="请输入银行账号" disabled
							:inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="cCusBank" label="开户银行:">
						<uni-easyinput v-model="entity.cCusBank" placeholder="请输入开户银行" disabled :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="iARMoney" label="应收余额:">
						<uni-easyinput v-model="entity.iARMoney" placeholder="请输入应收余额" disabled :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="cCusLPerson" label="法人:">
						<uni-easyinput v-model="entity.cCusLPerson" placeholder="请输入法人" disabled :inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="cCusRegCode" label="营业执照:">
						<uni-easyinput v-model="entity.cCusRegCode" placeholder="请输入营业执照号码" disabled
							:inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="dLastDate" label="余额初始日期:">
						<view>
							<uni-easyinput v-model="entity.dLastDate" placeholder="请选择余额初始日期" disabled
								:inputBorder="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="cCusPhone" label="手机号:">
						<uni-easyinput v-model="entity.cCusPhone" placeholder="请输入手机号" type="number" disabled
							:inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="IsInternal" label="内部企业">
						<uni-data-select placeholder="请选择内部企业" v-model="entity.IsInternal" disabled
							:localdata="IsInternalOptions"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item name="DeptCode" label="所属公司">
						<uni-data-select placeholder="请选择所属公司" v-model="entity.DeptCode" disabled
							:localdata="DeptCodeOptions"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item name="IRInfo" label="开票要求:">
						<uni-easyinput v-model="entity.IRInfo" placeholder="请输入开票要求" type="textarea" disabled
							:inputBorder="false" />
					</uni-forms-item>
					<uni-forms-item name="cCusAddress" label="地址:">
						<uni-easyinput v-model="entity.cCusAddress" placeholder="请输入地址" type="textarea" disabled
							:inputBorder="false" />
					</uni-forms-item>
				</div>
			</uni-forms>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	//客户
	import {
		// 获取客户备案详情
		Cust_CustomerLinkManGetDataListByConditions,
		// 获取客户收件地址
		Cust_AddressBookGetDataListByMoreCondition,
		// 获取客户备案上级单位
		CustomerInfoGetTheData,
		// 获取销售性质下拉列表数据
		Base_DictionaryMainGetTheDataByDicKey,
		// 获取省份
		GetDataListByPIdListProvince,
		// 获取市
		GetDataListByPIdListcCity,
		// 获取区
		GetDataListByPIdListcCounty,
		// 客户备案获取所属公司
		Base_u8databaseGetbase_u8databaseDataList
	} from '@/api/interface.js'
	export default {
		components: {},
		data() {
			return {
				// 日期选择
				mode: 'date',
				loading: false,
				// 内部企业下拉数据
				IsInternalOptions: [{
						text: '是',
						value: 1
					},
					{
						text: '否',
						value: 0
					}
				],
				// 客户来源下拉列表数据
				CustomerOriginOptions: [],
				// 所属公司下拉列表数据
				DeptCodeOptions: [],
				columnsType: [{
						name: "潜在",
						Id: 0
					},
					{
						name: "正式",
						Id: 1
					},
					{
						name: "休眠",
						Id: 2
					},
					{
						name: "待转正",
						Id: 3
					}
				],
				columns: [{
					value: 1,
					text: "直销",
				}, {
					value: 2,
					text: "渠道",
				}, {
					value: 3,
					text: "代理"
				}],
				value: "",
				entity: {},
				cCusCode: "",
				show: false,
				Id: "",
				// 传递过来的参数对象
				options: {}
			};
		},
		onLoad(options) {
			this.options = options
			if (options.Id) {
				this.openForm(options.Id, options.cCusCode);
			}
		},
		computed: {
			...mapState(["CustSourceOptions", "UserInfo"]),
		},
		methods: {

			//获取省份信息
			getProvinceListData(entity) {
				GetDataListByPIdListProvince({})
					.then(resJson => {
						let cProvinceName = resJson.Data.filter(item => {
							return entity.cProvince === item.Id
						})[0].Name
						let cProvinceId = resJson.Data.filter(item => {
							return entity.cProvince === item.Id
						})[0].Id
						this.entity['cProvinceName'] = cProvinceName
						// 获取市信息
						this.getCityListData(cProvinceId)
						this.$forceUpdate()

					});
			},
			// 获取市信息
			getCityListData(cProvinceId) {
				GetDataListByPIdListcCity({
						Id: cProvinceId
					})
					.then(resJson => {
						let cCityName = resJson.Data.filter(item => {
							return this.entity.cCity === item.Id
						})[0].Name
						let cCityId = resJson.Data.filter(item => {
							return this.entity.cCity === item.Id
						})[0].Id
						// 获取区信息
						this.getVillage(cCityId)
						this.entity['cCityName'] = cCityName
						this.$forceUpdate()

					});
			},
			// 获取区信息
			getVillage(cCityId) {
				GetDataListByPIdListcCounty({
						Id: cCityId
					})
					.then(resJson => {

						let cCountyName = resJson.Data.filter(item => {
							return this.entity.cCounty === item.Id
						})[0].Name
						this.entity['cCountyName'] = cCountyName
						this.$forceUpdate()
					});
			},

			formatDate(date) {
				var time = new Date(date);
				var y = time.getFullYear();

				return `${y}-${date.getMonth() + 1}-${date.getDate()}`;
			},

			// 获取客户备案上级单位
			getOUTList(id) {
				CustomerInfoGetTheData({
						id: id
					})
					.then(resJson => {
						this.entity.ParentName = resJson.Data.cCusName;
					});
			},
			init() {
				this.Id = "";
				this.entity = {};
			},
			openForm(Id, cCusCode) {
				this.init();
				this.cCusCode = cCusCode;
				console.log(cCusCode);
				if (Id) {
					this.Id = Id;
					CustomerInfoGetTheData({
							id: Id
						})
						.then(resJson => {
							if (resJson.Success) {
								this.entity = resJson.Data
								if (this.entity.ParentId) this.getOUTList(this.entity.ParentId);
								if (this.entity.cCusType) {
									// 客户类型单独处理回显
									let cCusTypeName = ""
									if (this.entity.cCusType == -1) {
										this.entity.cCusTypeName = this.columnsType[0].name
									} else {
										this.entity.cCusTypeName = this.columnsType.filter(item => item.Id == this
											.entity.cCusType)[0].name
									}
								}

								// 销售性质回显
								if (this.entity.SaleType) {
									console.log('打印销售性质', this.entity.SaleType)
									this.entity.SaleType = this.columns.filter(item => item.value == this.entity
										.SaleType)[0].text
								}

								// 客户来源回显
								if (this.entity.CustomerOrigin) {
									this.CustomerOriginOptions = this.CustSourceOptions
								}

								// this.$forceUpdate()
								//获取省份信息
								this.getProvinceListData(this.entity)
								// 获取所属公司
								this.getBase_u8databaseGetbase_u8databaseDataList(this.entity)
							}
						});
				}
			},
			// 获取备案客户所属公司
			getBase_u8databaseGetbase_u8databaseDataList(entity) {
				Base_u8databaseGetbase_u8databaseDataList({}).then(resJson => {

					if (resJson.Success) {
						if (resJson.Data) {
							resJson.Data.forEach(item => {
								item.text = item.DeptName
								item.value = item.Id
							})
						}

						this.DeptCodeOptions = resJson.Data
						if (entity.DeptCode) {
							let DeptCode = this.DeptCodeOptions.findIndex(item => item.U8Code === entity
								.DeptCode)
							console.log('获取所诉公司-------------', resJson.Data, this.CustSourceOptions)
						}



					}
				})
			},

		}
	};
</script>

<style scoped lang="less">
	/* 设置 label 的样式 */
	::v-deep.uni-forms-item {
		padding-right: 40rpx !important;

		/* 例如，设置 label 的宽度和对齐方式 */
		.uni-forms-item__label {
			display: flex !important;
			justify-content: flex-end !important;
		}
	}

	// 覆盖uniapp 的 uni-data-select 央视
	::v-deep.uni-select {
		border: none !important;
	}

	// 覆盖uniapp 的 uni-data-pircker 央视
	::v-deep.input-value-border {
		border: none !important;
	}

	page {
		background-color: #fff;
	}

	.Fa {
		display: flex;
		justify-content: left;
	}

	.Celltitle {
		color: #000;
		font-weight: 600;
	}

	.left {
		margin: 10px 0px 10px 15px;
	}

	.fontstepper {
		margin-left: 15px;
		line-height: 40px;
	}

	.font {
		margin-left: 15px;
		font-size: 18px;
	}

	.aa {
		text-align: right;
	}

	.scrollBar {
		/* height: 550px; */
		height: calc(100vh - 352px);
		overflow: auto;
		/* padding-bottom: 80px; */
	}

	.close {
		position: "absolute";

		right: 0;
		bottom: 0;
		padding: "5px 16px";
		background: "#fff";
		text-align: right;
		z-index: 1;
	}

	.client {
		/* box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px; */
	}

	.mysamplebox {
		width: 95%;

		margin: 0 auto;

		border: 1px solid #ccc;
		/* box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 10px 10px; */

		margin-top: 20px;
		margin-bottom: 10px;
	}
</style>